<!--
 * @Author: huangyq
 * @Date: 2022-03-31 17:17:48
 * @LastEditTime: 2022-06-14 13:11:50
 * @LastEditors: huangyq
 * @Description: your description
 * @FilePath: /vue3-boilerplate-pc-client/src/views/login/index.vue
-->
<template>
  <div class="login">
    <div class="login_box">
      <div class="login_box_left">
        <p>XXXX服务平台</p>
        <p>运营管理网站模板</p>
      </div>
      <div class="login_box_right">
        <img src="/public/logo.png" class="login_box_right--logo" />
        <el-form
          ref="formRef"
          class="login_box_right_form"
          :model="form"
          :rules="rules"
          label-width="0"
        >
          <el-form-item prop="mobilePhone">
            <el-input
              v-model.trim="form.mobilePhone"
              type="text"
              maxlength="11"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div class="login_box_right_form_code">
              <el-input
                v-model.trim="form.code"
                maxlength="6"
                placeholder="请输入验证码"
              ></el-input>
              <span
                v-if="!counting"
                class="login_box_right_form_code--text"
                @click="onSendVerifyCode"
                >获取验证码</span
              >
              <span
                v-else
                class="login_box_right_form_code--text login_box_right_form_code--cd"
                >{{ current.seconds }}s后重新获取</span
              >
            </div>
          </el-form-item>
          <el-button
            type="primary"
            class="login_box_right_form--btn"
            @click="login"
            >登录
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { submitForm, isCellPhone, setStorage } from '@/utils'
import { ElMessage, FormInstance } from 'element-plus'
import { useCountDown } from '@/hooks'
import { LoginApi } from '@/apis'
import { usePermissionStore } from '@/stores'

const form = reactive({
  mobilePhone: '',
  code: ''
})
const rules = {
  mobilePhone: [
    {
      required: true,
      message: '手机号不能为空',
      trigger: 'blur'
    },
    {
      pattern: /^1[3-9][0-9]{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur'
    }
  ],
  code: [{ required: true, message: '验证码不能为空' }]
}

/**
 * 验证码
 */
const { current, start, counting, reset } = useCountDown({
  time: 60000,
  onFinish: () => {
    reset()
  }
})
function onSendVerifyCode() {
  if (!isCellPhone(form.mobilePhone)) {
    return ElMessage.error('请输入正确的手机号')
  }
  LoginApi.verifyCodeUsingPOST({
    mobilePhone: form.mobilePhone,
    platformId: 0
  })
  start()
}

/**
 * 登录操作
 */
const router = useRouter()
const formRef = ref<FormInstance | null>(null)
const permissionStore = usePermissionStore()
async function login() {
  const isPass = await submitForm(formRef.value!)
  if (isPass) {
    const params = {
      loginType: 'MESSAGE',
      mobilePhone: form.mobilePhone,
      platformId: 0,
      pwd: form.code
    }
    const res = await LoginApi.loginUsingPOST(params)
    if (res.data.success) {
      setStorage('token', res.data.token as string)
      await permissionStore.fetchPermission()
      router.push({ name: 'pages' })
    }
  }
}
</script>
<style scoped lang="scss">
.login {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(224deg, #428dff 0%, #4281ff 100%);
  &_box {
    width: 62.5vw;
    height: 74vh;
    margin: 2vh 0;
    border-radius: 30px;
    box-shadow: 0px 0px 20px #226dff;
    display: flex;
    &_left {
      width: 31.25vw;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background-size: 100% 100%;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;

      p {
        color: #ffffff;
        font-size: 30px;
        letter-spacing: 5px;
      }
    }
    &_right {
      flex: 1;
      background: #fff;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-bottom: 40px;
      &--logo {
        width: 16vw;
        height: 12vh;
      }
      &_form {
        width: 21vw;
        margin-top: 5.6vh;
        &--btn {
          width: 100%;
          border-radius: 34px;
          background: #4281ff;
          margin-top: 3.7vh;
          font-size: 20px;
        }
        &_code {
          width: 100%;
          display: flex;
          &--text {
            width: 160px;
            text-align: center;
            border: 1px solid var(--el-border-color);
            margin-left: 10px;
            cursor: pointer;
          }
          &--cd {
            color: red;
          }
        }
      }
    }
  }
}
</style>
